<html xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"    
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">    
<html>
<head th:include="common/common::header">
    <meta charset="UTF-8">
    <style type="text/css">
        #index {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            opacity: 0;
            font-size: 12px;
        }
        .index-l {
            width: 100%;
            margin-top: 0.5%;
            margin-left: 29px;
        }
    </style>
</head>

<body>
    	<div class="index-1">
	      	  <shiro:hasPermission name="sys:orgid:add">
	      	  <a href="javascript:void(0)" onclick="opendialog({title:'机构-新增',width:'50%',height:'50%',url:'system/organization/add_01',onClose:searchOgrid})" data-options="iconCls:'fa fa-pencil'" id="addr" class="easyui-linkbutton primary" style="height: 32px;border-left-width: 1px;">新增</a>
       		  </shiro:hasPermission>
       		   <shiro:hasPermission name="sys:orgid:edit">
       		  <a href="javascript:void(0)" onclick="openDialogEdit()"  class="easyui-linkbutton error" id="reedit" data-options="iconCls:'fa fa-gears'">修改</a>
       		  </shiro:hasPermission>
       		  <a href="javascript:void(0)" onclick="searchOgrid()" id="rebreak" class="easyui-linkbutton success" data-options="iconCls:'fa fa-refresh'">刷新</a>
	      </div>
		<div class="form-item" >
		<div style="margin-top: 0.5%">
		  	<div><div class="index-1" style="opacity: 1;width:66%;height:720px; float:left " id="iimain" ></div></div>
		  	<div style = "right:20px;width:33%;top:20px;float:rigth" class="easyui-panel" data-options="border:false,doSize:false,fit:true">
		  	<ul id="tree"></ul> 
		  	</div>
		  </div>
		<!-- 树形的Dom -->
		<div>
		
		</div>
	</div>
	 
<script type="text/javascript" src="/base/build/dist/echarts.js"></script>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
function escape2Html(str) {
	 var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
	 return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
	}
//<![CDATA[                
//     // 路径配置
    require.config({
        paths: {
            echarts: '/base/build/dist'
        }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            var data_01 = '[[${mapArray}]]';
            
            var  data = escape2Html(data_01);
        	// 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('iimain')); 
            
            option = {
            	    title: {
            	        text : '机构信息分布图'
            	    },
            	    tooltip : {
            	        trigger: 'item',
            	        formatter: '{b}<br/>点击查看详情'
            	    },
            	    legend: {
            	    	show:false,
            	        orient: 'vertical',
            	        x:'right',
            	        data:['市州机构信息']
            	    },
            	    dataRange: {
            	        min: 0,
            	        max: 22,
            	        color:['pink','yellow'],
//             	        text:['高','低'],           // 文本，默认为数值文本
            	        show:false,
            	        calculable : false
            	    },
            	    series : [
            	        {
            	            name: '市州机构信息',
            	            type: 'map',
            	            mapType: '四川',
            	            selectedMode : 'single',
            	            itemStyle:{
            	                normal:{label:{show:true}},
            	                emphasis:{label:{show:true}}
            	            },
            	            data: data
            	        }
            	    ]
            	};
            
            // 为echarts对象加载数据 
            myChart.setOption(option,true); 
            	var ecConfig = require('echarts/config');
            	myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
            		console.log(param)
            		console.log(JSON.parse(data))
                	for(var i=0;i<JSON.parse(data).length;i++){
                		if(JSON.parse(data)[i].name==param.target){
                			jQuery('#tree').tree({
                				parentField:'pid',
                		   		textField:'text',
                		   		valueField:'id',
                			    url:'/system/organization/load_datagrid.do?city='+JSON.parse(data)[i].value   
                			}); 
              			}
                	}
            	   
            	})
        }
    );
   	jQuery('#tree').tree({    
   		parentField:'pid',
   		textField:'text',
   		valueField:'id',
	    url:'/system/organization/load_datagrid.do'
	});

   	function searchOgrid() {
   		$('#tree').tree('reload'); 
	}
   	
    function openDialogEdit(){

    	var node = jQuery("#tree").tree("getSelected");
    	if(node==null){
    		parent.layer.msg("请选择一行数据",{icon:7,time:3000});
			return false;
    	}
    	
		var dialog = document.createElement('div');
		dialog.style.cssText += " padding:10px 20px ";
		dialog.setAttribute("custom", "arain-dialog");
        window.top.document.body.appendChild(dialog);
        
        window.top.jQuery(dialog).dialog({
        	width:'50%',
        	height:'50%',
			title:'机构-编辑',
			modal:true,
			draggable:true,
			resizable:false,
			collapsible:true,
			minimizable:false,
			maximizable:true,
			//iconCls:'icon-grid',
			method:'post',
			href:'/system/organization/edit_01',	
			queryParams:{id:node.id},
			onBeforeDestroy:function(){
			}
			,onBeforeClose:function(){
				var frame = jQuery('iframe', this);
				if(frame.length>0){
	                try{//跨域会拒绝访问，这里处理掉该异常   
	                	frame[0].contentWindow.document.write('');
	                    frame[0].contentWindow.close();
	                }catch(e){
	                    //Do nothing   
	                }
	                frame.remove();
	                //IE9以上支持，ie6、7、8使用$.browser.msie
	                try{
	                	 if(jQuery.support.msie){
	                         CollectGarbage();
	                     }
	                }catch(e){
	                	if (window.CollectGarbage){
	                		CollectGarbage();
	                	}
	                }
		        }
			    window.top.jQuery(dialog).dialog('destroy');
				return true;
			}
			,onClose:function(){
				searchOgrid();
			}
			,extractor: function(data){
				var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
					var matches = pattern.exec(data);
					if (matches){
						return matches[1];	// 仅提取主体内容
					} else {
						try{
							dataJson = jQuery.parseJSON(data);
							toastr.options.target=window.top.document.body;
							toastr.error(dataJson.errorMessage,'错误');
							window.top.jQuery(dialog).dialog('close');
						}catch(e){
							
						}
					}
			}
		});
    	
    	return false;
    	
    }
  //  ]]>
   </script>
</body>

</html>